import { PdfJs } from "../interface";
import { FC, ReactElement, useEffect, useState } from "react";

interface AnnotationLayerProps {
  page: PdfJs.Page;
  renderAnnotations(annotations: PdfJs.Annotation[]): ReactElement;
}

interface Status {
  loading: boolean;
  annotations: PdfJs.Annotation[];
}

const AnnotationLoader: FC<AnnotationLayerProps> = ({
  page,
  renderAnnotations,
}) => {
  const [status, setStatus] = useState<Status>({
    loading: true,
    annotations: [],
  });

  useEffect(() => {
    page.getAnnotations({ intent: "display" }).then((result) => {
      setStatus({
        loading: false,
        annotations: result,
      });
    });
  }, []);

  return status.loading ? <></> : renderAnnotations(status.annotations);
};

export default AnnotationLoader;
